// 创建canvas(画布)
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// 背景图像
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "/images/background.jpg";

// 英雄图像
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
	heroReady = true;
};
heroImage.src = "/images/hero.jpg";

// 怪物图像
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
	monsterReady = true;
};
monsterImage.src = "/images/monster.jpg";

// 定义游戏对象
var hero = {
	speed: 256 // 每秒移动像素数
};
var monster = {};
var monstersCaught = 0;

// 定义按下的键值的集合
var keysDown = {};

addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;  //keyCode为按下的键的值，将keysDown[e.keyCode]赋值为true
}, );

addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode]; //删掉
}, );

// 抓住怪物时重置游戏
var reset = function () {
	// 将英雄放到屏幕中间
	hero.x = canvas.width / 2;
	hero.y = canvas.height / 2;
	

	// 将怪物随机放到屏幕上的某个地方
	monster.x = 32 + (Math.random() * (canvas.width - 64));
	monster.y = 32 + (Math.random() * (canvas.height - 64));
};

// 更新游戏对象,人物越往上y坐标越小，越往左x坐标越小
var update = function (modifier) {
	// 此处 modifier 来自于 main() 传过来的数
	if (38 in keysDown) { // 玩家按住上键
		hero.y -= hero.speed * modifier;
	}
	if (40 in keysDown) { // 玩家按住下键
		hero.y += hero.speed * modifier;
	}
	if (37 in keysDown) { // 玩家按住左键
		hero.x -= hero.speed * modifier;
	}
	if (39 in keysDown) { // 玩家按住右键
		hero.x += hero.speed * modifier;
	}

	// 怪物被抓住了吗
	if (
		// 32是由英雄和怪物的大小决定的，图片是32*32的
		// 定义范围
		hero.x <= (monster.x + 32)
		&& monster.x <= (hero.x + 32)
		&& hero.y <= (monster.y + 32)
		&& monster.y <= (hero.y + 32)
	) {
		++monstersCaught;
		reset();
	}
};

// 画出所有东西
/* 
ctx.drawImage(图片对象, x位置, y位置)
ctx.drawImage(图片对象, x位置, y位置, 宽度, 高度)
ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪的高度, x位置, y位置, 宽度, 高度) 
*/

var render = function () {
	if (bgReady) {
		ctx.drawImage(bgImage, 0, 0);
	}

	if (heroReady) {
		ctx.drawImage(heroImage, hero.x, hero.y);
	}

	if (monsterReady) {
		ctx.drawImage(monsterImage, monster.x, monster.y);
	}

	// 将文字设置于左上角
	ctx.fillStyle = "rgb(250, 250, 250)";  
	ctx.font = "24px 宋体";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	ctx.fillText("被抓的妖精: " + monstersCaught, 32, 32);  
	//fillText(text,x,y,maxWidth) x:开始绘制文本的 x 坐标位置（相对于画布）。y:开始绘制文本的 y 坐标位置（相对于画布）。maxWidth:可选。允许的最大文本宽度，以像素计。
};

// 主函数，控制游戏循环
var main = function () {
	var now = Date.now(); //拿到当前时间
	// console.log(now)
	var delta = now - then;  //计算时间差（距离上次主函数被调用时过了多少毫秒）,得到的是一个毫秒为单位的整数，将它化为秒为单位的数，就需要在下方除以1000
	// console.log(delta)
	update(delta / 1000);
	render();

	then = now;

	// 快速的再执行此操作(利用它的功能)
	requestAnimationFrame(main); //requestAnimationFrame:请求动画帧
	
	/* requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
	requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），
	也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。
	此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。
	不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。
	requestAnimationFrame使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。 */
};

// 跨浏览器支持requestAnimationFrame (浏览器兼容性的解决)
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// 获取当前时间，拿到上面做时间差
var then = Date.now();
reset();
main();
